.modal-widget() {
    .modal-wrapper {
        z-index: 2;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

        .modal-mask {
            z-index: 3;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(30, 30, 30, 0.3);
            transition: all 0.2s ease;
            animation: fade-in 0.4s ease;

            @keyframes fade-in{
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            // &.hide {
            //     opacity: 0;
            // }
            // &.show {
            //     opacity: 1;
            // }
        }

        .modal-widget {
            z-index: 4;
            position: absolute;
            min-height: 200px;
            top: 170px;
            left: 0;
            right: 0;
            margin: 0 auto;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px 0;
            background: #fff;
            transition: all 0.2s ease;
            animation: scale-in 0.2s ease;

            @keyframes scale-in{
                from {
                    transform: scale(0);
                    opacity: 0;
                }
                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }
            
            // &.hide {
            //     transform: scale(0);
            //     opacity: 0;
            // }
    
            // &.show {
            //     transform: scale(1);
            //     opacity: 1;
            // }
    
            &.small {
                width: 320px;
            }
    
            &.big {
                width: 600px;
            }
    
            .modal-title {
                position: relative;
    
                .modal-title-text {
                    font-size: 20px;
                    line-height: 24px;
                    padding: 12px;
                    border-bottom: 1px solid #ccc;
                    background: #eee;
                    letter-spacing: 2px;
                    color: #191918;
                }
            }
    
            .modal-body {
                margin-bottom: 56px;
                overflow-y: auto;
                max-height: 400px;
            }
    
            .modal-footer {
                position: absolute;
                bottom: 0;
                width: 96%;
                text-align: center;
                padding: 2%;
                background: #f1f1f1;
            }
        }
    }
    
}